<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>开关灯</title>
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
		<script>
			/* 
				Jquery提供的特效方法:
				显示,隐藏,淡入,淡出,上拉,下拉以及对应的切换方法
				注意:这些方法都可以选择参数,以下就用fadeOut()举例
				第一个参数表示速度,可以使用英文或者毫秒数
				第二个参数表示切换模式,默认是swing(加速减速过程),可以设置为linear(匀速)
				第三个参数表示效果结束后触发的函数
			 */
			$(function(){
				//通过选择器获取到指定的元素,绑定事件
				//注意:eq()是jquery的函数,用来根据下标获取指定数组/集合元素
				//:eq(index)是css的选择器,也是通过下标获取指定元素
				$(".btns input:eq(0)").click(function(){
					$("img").show();
				});
				$(".btns input").eq(1).click(function(){
					$("img").hide();
				});
				$(".btns input").eq(2).click(function(){
					$("img").toggle();
				});
				$(".btns input").eq(3).click(function(){
					$("img").fadeIn();
				});
				
				$(".btns input").eq(4).click(function(){
					$("img").fadeOut(5000,"linear",function(){
						alert("淡出完成...");
					});
				});
				$(".btns input").eq(5).click(function(){
					$("img").fadeToggle();
				});
			});
		</script>
	</head>
	<body>
		<div class="btns">
			<input type="button" value="显示"/>
			<input type="button" value="隐藏"/>
			<input type="button" value="切换"/>
			<input type="button" value="淡入"/>
			<input type="button" value="淡出"/>
			<input type="button" value="切换"/>
		</div>
		<hr/>
		<div>
			<img src="img/open.jpg" />
		</div>
		
	</body>
</html>
